<template>
  <div class="pagestyle">
    <list_controller
      ref="zujianname"
      :options="state.options"
      pageName="摄像头管理列表"
    >
      <template v-slot:opraCurdBtn1="row">
        <span>
          <!-- <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑
          </el-button> -->
          <el-button
            type="primary"
            style="font-size: 14px"
            link
            size="small"
            @click="lookBtn(row.row.row)"
            >查看
          </el-button>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="deleteBtn(row.row.row)"
            >删除
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <el-button class="btn" type="primary" link @click="addBtn('mul')">
          <el-icon style="margin-right: 2px">
            <svg-icon
              class-name="search-icon"
              icon-class="addtotal"
            /> </el-icon
          >新增
        </el-button>
        <el-button class="btn" type="primary" link @click="deleteBtn('mul')">
          <el-icon> <DeleteFilled /> </el-icon>删除
        </el-button>
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1000"
        :height="auto"
        v-model="state.addModal"
        resize
        :mask="true"
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRef"
              :model="state.formData"
              :rules="state.rules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="摄像头名称" prop="address">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="类型" prop="measureContent">
                    <el-select
                     style="width: 100%;"
                      clearable
                      filterable
                      v-model="state.formData.measureContent"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in state.presetList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="通道号" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="IP" prop="address">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="端口" prop="address">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="对讲自动录音" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="语音控制" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="录音保存时间(天)" prop="address">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="热成像" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="控制焦距调整" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="云台控制" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="可见光" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="安装地点" prop="measureRank">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="rtsp链接 例如:rtsp;/<ip>:3554/chn0" prop="measureRank">
                    <el-input
                      v-model="state.formData.address"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <p class="mask_sub_title">
                  <svg-icon class-name="search-icon" icon-class="dot" /><span
                    >其他</span
                  >
                </p>
                <el-row :gutter="20">
                  <el-col :span="16">
                    <el-form-item label="上传图片" prop="imagePath">
                      <el-upload
                        action
                        v-model:file-list="state.fileList"
                        list-type="picture"
                        :before-upload="beforeUpload"
                        :http-request="uploadHttpRequestAdd"
                        ref="upload"
                        :on-preview="handlePictureCardPreview"
                      >
                        <el-button>
                          <el-icon> <UploadFilled /> </el-icon>上传图片
                        </el-button>
                        <template #tip>
                          <div class="el-upload__tip">
                            上传图片支持jpg/png等，大小不超过 500kb
                          </div>
                        </template>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row> -->
            </el-form>
            <div class="form_footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </teleport>
        <!-- 详情 -->
        <el-drawer
      v-model="state.drawerShow"
      direction="rtl"
      size="50%"
      close-on-click-modal
      :modal="true"
    >
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title" style="color: #3e464f; margin: 0">
          <svg-icon class-name="search-icon" icon-class="dot" /><span
            >详情</span
          >
        </h4>
      </template>
      <div>
        <el-row
          :gutter="20"
          style="
            background: rgba(91, 109, 128, 0.04);
            display: flex;
            align-items: center;
            padding: 20px 0;
          "
        >
          <el-col :span="8" style="text-align: center">
            <div class="img_box">
              <img
                style="width: 120px; height: 120px"
                v-if="state.formData.address != null"
                :src="state.formData.address"
                alt=""
              />
              <img
                v-else
                style="width: 120px; height: 120px"
                src="@/assets/images/noimg.png"
              />
            </div>
            <!-- <p>{{state.formData.sensorName}}</p> -->
          </el-col>
          <el-col :span="16">
            <el-row :gutter="20">
              <el-col :span="24">
                <div>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <p>模式</p>
                      <p>{{ 999 }}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>输入口数量/输出口数量</p>
                      <p>{{ 999 }}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>引用数量</p>
                      <p>
                        {{ 999 }}
                      </p>
                    </el-col>
                    <el-col :span="12">
                      <p>传感器断电断线</p>
                      <p>
                        {{ 999 }}
                      </p>
                    </el-col>
                    <!-- <el-col :span="8">
                      <p>报警模式</p>
                      <p>{{state.formData.alarmTypeName}}</p>
                    </el-col> -->
                    <!-- <el-col :span="8">
                      <p>上限报警/解报值</p>
                      <p v-if="state.formData.upAlarmValue">
                        {{state.formData.upAlarmValue}}/{{state.formData.upRelieveValue}}</p>
                      <p v-else>- / -</p>
                    </el-col> -->
                    <!-- <el-col :span="8">
                      <p>下限报警/解报值</p>
                      <p v-if="state.formData.downAlarmValue">
                        {{state.formData.downAlarmValue}}/{{state.formData.downRelieveValue}}</p>
                      <p v-else>- / -</p>
                    </el-col> -->
                    <!-- <el-col :span="8">
                      <p>设备有效期</p>
                      <p>{{state.formData.expiration}}</p>
                    </el-col> -->
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <p
          class="drawer_sub_title"
          style="margin: 20px 0 12px 0"
        >
          <span class="sub_title_line">引用</span>
        </p>
        <el-row
          :gutter="20"
          style="
            background: rgba(91, 109, 128, 0.04);
            display: flex;
            align-items: center;
            padding: 10px 0;
            margin-top: 10px;
          "
        >
          <el-col :span="24">
            <div class="fsc" style="margin-bottom: 10px">
              <span
                class="wn"
                style="
                  font-size: 14px;
                  font-weight: 700;
                  color: rgb(51, 51, 51);
                  margin-right: 10px;
                "
                >编号</span
              >
              <el-input
                style="width: 200px; margin-right: 10px"
                v-model="state.pointId"
                placeholder="请输入"
                clearable
              >
              </el-input>
              <el-button @click="btnclick(1)" size="default" type="primary"
                >查询</el-button
              >
              <el-button
                @click="btnclick(2)"
                size="default"
                style="background-color: #f2f4f5; border: none"
                >重置
              </el-button>
            </div>
            <vxe-table
              height="240"
              :data="state.pontList"
              :row-style="rowStyle"
            >
              <vxe-column title="序号" type="seq" :width="55"></vxe-column>
              <!-- <vxe-column
                v-for="(item, index) in state.ponittableheads"
                :field="item.field"
                :title="item.title"
                :params="{ name: item.name }"
                :width="item.width ? item.width : ''"
                :key="index"
              ></vxe-column> -->
              <vxe-column
                field="pointNum"
                title="编号"
                show-overflow
                tooltip-effect="dark"
              ></vxe-column>
              <vxe-column
                field="sensorPlace"
                title="地点"
                show-overflow
                tooltip-effect="dark"
              ></vxe-column>
              <vxe-column title="操作">
                <template #default="{ row }">
                  <el-button link type="primary" @click="tobtnClick(row)"
                    >查看测点详情</el-button
                  >
                </template>
              </vxe-column>
            </vxe-table>
            <div style="margin-top: 10px; display: flex; justify-content: end">
              <el-pagination
                class="pages globalFontSize"
                v-model:current-page="state.page.currentPage"
                v-model:page-size="state.page.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.page.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick(state.formData)"
            >编辑</el-button
          >
        </div>
      </template> -->
    </el-drawer>
    <el-dialog v-model="state.dialogVisiblepictureCardPreview">
      <img :src="state.dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { getlistAlarmTypesList } from "@/api/config";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps = import.meta.env.VITE_APP_HTTP;
components: {
  list_controller;
}
const upload = ref(null);
let state = reactive({
  pointId: "",
  pontList: [],
  page: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  drawerShow: false,
  fileList: [],
  dialogVisiblepictureCardPreview: false,
  dialogImageUrl: "",
  options: {
    isShowCaozuo: true,
    tableheads: computed(() => table_headers.configMeasure),
    // tableheads: computed(() => [
    //   {
    //     field: "address",
    //     show: 1,
    //     sort: 0,
    //     title: "机器人名称",
    //     width: null,
    //   },
    // ]),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "address",
          title: "摄像头名称",
          type: "input",
          binddata: "",
        },
        {
          field: "address",
          title: "分站模式",
          type: "select",
          binddata: "",
        },
        {
          field: "address",
          title: "云台控制",
          type: "select",
          binddata: "",
        },
        {
          field: "address",
          title: "语音控制",
          type: "select",
          binddata: "",
        },
      ],
    },
    dataUrl: "/gas/place/list",
    delUrl: "/gas/place/",
    addUrl: "/gas/place/addPlace",
    // descUrl: "/measure/search",
    // editUrl: "/measure/update",
  },
  // 表单
  addModal: false,
  modalTitle: "新增",
  formRef: null,
  formData: {},
  rules: {
    address: [
      {
        required: true,
        message: "请输入安装地点",
        trigger: "blur",
      },
    ],
  },
  editId: undefined,
  stationInNumList: [
    {
      code: 1,
      label: "一般",
    },
    {
      code: 2,
      label: "重要",
    },
    {
      code: 3,
      label: "非常重要",
    },
  ],
  presetList: [
    {
      code: true,
      label: "是",
    },
    {
      code: false,
      label: "否",
    },
  ],
});

// 新增按钮
function addBtn(row) {
  state.modalTitle = "新增";
  state.addModal = true;
  state.formData = {};
  state.editId = undefined;
  state.fileList = [];
}
// 编辑按钮
function editBtn(row) {
  state.modalTitle = "编辑";
  state.addModal = true;
  state.formData = row;
  state.editId = row.id;
  //   axios.post(state.options.descUrl, { id: row.id }).then((res) => {
  //     if (res.code == 200) {
  //       state.formData = res.data.list[0];
  //       state.editId = res.data.list[0].id;
  //     }
  //   });
}
// 查看按钮
function lookBtn(row) {
  console.log(row, "rowrow");
  state.drawerShow = true;
  // state.detailBtn = false;
  state.formData = row;
  let imagePath = imgStr(row.address);
  let imageName = LastStr(row.address);
  state.formData.address = imagePath;
  console.log(state.formData, "state.formData");
}
function deleteBtn(row) {
  let ids = [];
  if (row != "mul") {
    ids = [row.id];
  } else {
    if (store.records.length > 0) {
      ids = store.records.map((item) => {
        return item.id;
      });
    } else {
      proxy.$modal.msgSuccess("请先勾选所要删除数据!");
    }
  }
  if (ids.length > 0) {
    proxy
      .$confirm("确认删除吗？", "提示")
      .then(() => {
        axios.delete(state.options.delUrl + ids).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
            store.records = [];
          }
        });
      })
      .catch(() => {
        console.log("cancel");
      });
  }
}
function imgStr(str) {
  if (str) {
    let index = str.search("profile");
    str = str.substring(index, str.length);
    let value =
      modeHttps == "development"
        ? "/dev-api"
        : modeHttps == "production"
        ? "/prod-api"
        : "/stage-api";
    let urlImage = previewHttps + value + str;
    console.log(urlImage, "urlImage");
    return urlImage;
  }
}
function LastStr(str) {
  if (str) {
  let index = str.lastIndexOf("/");
  str = str.substring(index + 1, str.length);
  console.log(str, "strstr");
  return str;
  }
}
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  state.page.pageSize = val;
  if (state.pointId) {
    //有搜索项
    // getpointList(1, state.pointId);
  } else {
    // getpointList(3, state.formData.id);
  }
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  state.page.currentPage = val;
  // getpointList();
};
function tobtnClick(row) {
  console.log(row, "rowrow");
  router.push({
    path: "/jcpz/fzjcd",
      query: {
      id: row.id,
    },
  });
}
function rowStyle({ row, rowIndex }) {
  if (rowIndex % 2 !== 0) {
    return { "background-color": "#f0f3f9" };
  } else {
    return { "background-color": "" };
  }
}
function btnclick(type) {
  if (type == 1) {
    // getpointList(type, state.pointId);
  } else {
    state.pointId = "";
    // getpointList(type, state.formData.id);
  }
}
function getpointList(type, id) {
  let obj = {
    imitateSensorId: id,
  };
  if (type == 1) {
    obj = {
      pointNum: id,
      imitateSensorId: state.formData.id,
      pageNum: state.page.currentPage,
      pageSize: state.page.pageSize,
    };
  } else {
    obj = {
      imitateSensorId: id,
      pageNum: state.page.currentPage,
      pageSize: state.page.pageSize,
    };
  }
  // axios.post("/imitate/sensor/queryPointBySensorId", obj).then((res) => {
  //   if (res.rows) {
  //     state.pontList = res.rows;
  //     state.page.total = res.total;
  //   }
  // });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (state.editId) {
        state.formData.id = state.editId;
        axios.post(state.options.editUrl, state.formData).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
          }
        });
      } else {
        axios.post(state.options.addUrl, state.formData).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
          }
        });
      }
    }
  });
}

function cancel() {
  state.addModal = false;
}

function getlistAlarmTypesData() {
  let arr = [];
  getlistAlarmTypesList().then((res) => {
    state.stationmodelList = res.data;
    state.stationmodelList.forEach((item) => {
      arr.push({
        value: item.id,
        label: item.alarmType,
      });
      state.options.queryList.querys[0].options = arr;
    });
  });
}
const uploadHttpRequestAdd = (data) => {
  upload.value.clearFiles();
  const formData = new FormData();
  formData.append("file", data.file);
  fileupload(formData).then((res) => {
    console.log(modeHttps, "modeHttps");
    let value =
      modeHttps == "development"
        ? "/dev-api"
        : modeHttps == "production"
        ? "/prod-api"
        : "/stage-api";
    state.formData.address = previewHttps + value + res.fileName;
    state.formData.originalFilename = res.originalFilename;
    state.fileList = [];
    state.fileList.push({
      name: res.originalFilename,
      url: state.formData.address,
    });
    console.log(state.fileList, "state.fileList");
    proxy.$modal.msgSuccess(res.msg);
  });
};
const beforeUpload = (file) => {
  //上传前的钩子
  if (file.type != "" || file.type != null || file.type != undefined) {
    //截取文件的后缀，判断文件类型
    const FileExt = file.name.replace(/.+\./, "").toLowerCase();
    // 计算文件的大小
    const isLt5M = file.size / 1024 < 500; //这里做文件大小限制
    //如果大于500kb
    if (!isLt5M) {
      proxy.$modal.msgWarning("上传文件大小超过限制!" + file.size);
      upLoading.value = 0;
      return false;
    }
    //如果文件类型不在允许上传的范围内
    if (fileType.includes(FileExt)) {
      return true;
    } else {
      proxy.$modal.msgWarning("上传文件格式不正确!");
      upLoading.value = 0;
      return false;
    }
  }
};
function handlePictureCardPreview(uploadFile) {
  state.dialogVisiblepictureCardPreview = true;
  state.dialogImageUrl = uploadFile.url;
}
// getlistAlarmTypesData();
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>